24. CSS Best Practices

I. Organizing CSS Code

Explanation: CSS ko section-wise (layout, typography, buttons, etc.) divide karna readability aur maintainability ke liye acha hota hai.

/* Layout */ .container { max-width: 1200px; margin: auto; } /* Typography */ h1 { font-size: 32px; } /* Buttons */ .btn { background: blue; color: white; } Run Code

II. Writing Maintainable CSS

Explanation: Reusable classes banana aur comments lagana future updates ke liye helpful hota hai. Har component ka styling alag hona chahiye.

/* Reusable Button */ .btn { padding: 10px 20px; border-radius: 5px; } .btn-primary { background-color: green; color: white; } Run Code

III. Use of BEM (Block Element Modifier)

Explanation: BEM ek naming convention hai jisse CSS classes ko logically aur consistently manage kiya jata hai. Jaise: .card__title--large

<div class="card"> <h2 class="card__title card__title--large">Product</h2> </div> <style> .card { border: 1px solid #333; padding: 10px; } .card__title { font-weight: bold; } .card__title--large { font-size: 24px; } </style> Run Code

IV. Code Minification

Explanation: Production ke liye CSS ko minify karna (white space & comments hata kar) page speed improve karta hai. Ye manually ya tools se ho sakta hai jaise cssnano, PostCSS, etc.

/* Before Minification */ body { background-color: white; color: black; } /* After Minification */ body{background-color:white;color:black} Run Code